<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <userAvatar @avatar-updated="handleAvatarUpdated" />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />用户名称
                <div class="pull-right">{{ user.userName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />手机号码
                <div class="pull-right">{{ user.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email" />用户邮箱
                <div class="pull-right">{{ user.email }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree" />所属部门
                <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="peoples" />所属角色
                <div class="pull-right">{{ roleGroup }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />创建日期
                <div class="pull-right">{{ user.createTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="user" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getCurrentUser, updateUserInfo } from "@/api/aggregation";
import { mapGetters } from 'vuex';

export default {
  name: "Profile",
  components: { userAvatar, userInfo, resetPwd },
  data() {
    return {
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo"
    };
  },
  computed: {
    ...mapGetters(['userId'])
  },
  created() {
    this.debugTokenStatus();
    // 页面刷新时等待权限守卫完成用户信息恢复
    this.waitForUserInfoAndGetUser();
  },
  methods: {
    debugTokenStatus() {
      Logger.log('=== 个人中心Token状态调试 ===');
      const token = this.$store.state.user.token;
      Logger.log('Store中的token:', token);
      Logger.log('Token长度:', token ? token.length : 0);

      if (token) {
        try {
          // 使用atob解码base64，浏览器原生支持
          const payload = JSON.parse(atob(token.split('.')[1]));
          Logger.log('Token payload:', payload);
          Logger.log('用户ID:', payload.userId);
          Logger.log('创建时间:', new Date(payload.created));
          Logger.log('过期时间:', new Date(payload.exp * 1000));
          Logger.log('是否过期:', Date.now() > payload.exp * 1000);
        } catch (error) {
          Logger.error('Token解析失败:', error);
        }
      }
    },

    // 等待用户信息恢复后再获取用户详情
    waitForUserInfoAndGetUser() {
      let checkCount = 0;
      const maxChecks = 50; // 最多检查50次（10秒）

      const checkUserInfo = () => {
        checkCount++;
        const token = this.$store.state.user.token;
        const userType = this.$store.state.user.userType;
        const userId = this.$store.state.user.id;

        Logger.log(`=== 检查用户信息状态 (${checkCount}/${maxChecks}) ===`);
        Logger.log('Store中的token:', token ? '存在' : '不存在');
        Logger.log('Store中的userType:', userType);
        Logger.log('Store中的userId:', userId);
        Logger.log('Store完整状态:', JSON.stringify(this.$store.state.user, null, 2));

        // 如果token存在且用户信息已恢复，则调用getUser
        if (token && (userType || userId)) {
          Logger.log('✅ 用户信息已恢复，开始获取用户详情');
          this.getUser();
          return;
        }

        // 如果检查次数超过限制，停止检查
        if (checkCount >= maxChecks) {
          Logger.error('❌ 等待超时，用户信息恢复失败');
          this.$message.error('页面加载超时，请刷新页面重试');
          return;
        }

        // 如果token存在但用户信息未恢复，继续等待
        if (token) {
          Logger.log('⏳ 等待权限守卫恢复用户信息...');
          setTimeout(checkUserInfo, 200); // 每200ms检查一次
          return;
        }

        // 如果没有token，跳转到登录页
        Logger.log('❌ 没有token，跳转到登录页');
        this.$router.push('/aggregation-login');
      };

      // 使用nextTick确保DOM更新后再检查
      this.$nextTick(() => {
        setTimeout(checkUserInfo, 100); // 延迟100ms开始检查
      });
    },

    getUser() {
      Logger.log('=== 使用/agg/user/current接口获取当前用户信息 ===');

      // 检查token是否存在
      const token = this.$store.state.user.token;
      Logger.log('getUser - Store中的token:', token ? '存在' : '不存在');
      Logger.log('getUser - Token详情:', token ? token.substring(0, 20) + '...' : '无');

      if (!token) {
        Logger.error('❌ 没有token，跳转到登录页');
        this.$message.error('登录已过期，请重新登录');
        this.$router.push('/aggregation-login');
        return;
      }

      getCurrentUser().then(response => {
        Logger.log('用户详情响应:', response);
        if (response.code === 0) {
          const userData = response.data || {};
          this.user = userData;
          this.roleGroup = userData.roleGroup || '';
          this.postGroup = userData.postGroup || '';

          // 更新store中的用户信息
          this.$store.commit('SET_USER_INFO', userData);
          if (userData.id) {
            this.$store.commit('SET_ID', userData.id);
          }

          Logger.log('✅ 用户信息获取成功:', userData);
        } else {
          Logger.error('获取用户信息失败:', response.data);
          // 如果是401错误，跳转到登录页
          if (response.data?.code === 401) {
            this.$message.error('登录已过期，请重新登录');
            this.$router.push('/aggregation-login');
          } else {
            this.$message.error(response.data?.msg || '获取用户信息失败');
          }
        }
      }).catch(error => {
        Logger.error('获取用户信息失败:', error);
        // 如果是401错误，跳转到登录页
        if (error.response?.status === 401 || error.response?.data?.code === 401) {
          this.$message.error('登录已过期，请重新登录');
          this.$router.push('/aggregation-login');
        } else {
          this.$message.error('获取用户信息失败，请重试');
        }
      });
    },

    // 处理头像更新
    handleAvatarUpdated(avatarUrl) {
      Logger.log('头像上传成功，头像URL:', avatarUrl);

      // 更新本地用户信息中的头像
      if (this.user) {
        this.user.avatar = avatarUrl;
      }

      // 调用用户信息更新接口，保存头像URL到后端
      const updateData = {
        id: this.user.id,
        name: this.user.nickName || this.user.name,
        phone: this.user.phonenumber || this.user.phone,
        email: this.user.email,
        avatar: avatarUrl  // 新增头像字段
      };

      Logger.log('更新用户信息，包含头像:', updateData);

      updateUserInfo(updateData).then(response => {
        Logger.log('用户头像更新响应:', response);
        if (response.code === 0) {
          Logger.log('✅ 头像信息已保存到后端');
        } else {
          Logger.error('头像信息保存失败:', response.data);
          this.$message.warning('头像上传成功，但保存到用户信息失败');
        }
      }).catch(error => {
        Logger.error('头像信息保存异常:', error);
        this.$message.warning('头像上传成功，但保存到用户信息失败');
      });
    }
  }
};
</script>
